<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" @click="searchChange">查询</el-button>
      <el-button type="primary" @click="searchReset">清空</el-button>
      <el-button v-if="permissions.eims_receipt_add" type="primary" @click="addOrUpdateHandle()">新增</el-button>
    </el-button-group>
		<el-form inline ref="searchForm" :model="dataForm" @keyup.enter.native="searchChange()">
			<el-form-item label="单号" prop="billId">
				<el-input v-model="dataForm.billId" placeholder="单号"></el-input>
			</el-form-item>
			<el-form-item label="客户名称" prop="customerName">
				<el-select v-model="dataForm.customerName">
					<el-option v-for="item in customerOptions" :value="item.name" :label="item.name" :key="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="审核状态" prop="customerName">
				<el-select v-model="dataForm.status" clearable>
					<el-option value="1" label="已审核"></el-option>
					<el-option value="0" label="未审核"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="制单人" prop="createUserName">
				<el-input v-model="dataForm.createUserName" placeholder="制单人" size="mini"></el-input>
			</el-form-item>
			<el-form-item label="制单日期">
				<el-row>
					<el-col :span="11">
						<el-date-picker v-model="dataForm.createTimeStart" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="timeOptionStart" @change="timeChangeEnd"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2" style="text-align: center;">-</el-col>
					<el-col :span="11">
						<el-date-picker v-model="dataForm.createTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="timeOptionEnd" @change="timeChangeStart"></el-date-picker>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item label="审核日期">
				<el-row>
					<el-col :span="11">
						<el-date-picker v-model="dataForm.auditTimeStart" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="timeOptionStart" @change="timeChangeEnd"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2" style="text-align: center;">-</el-col>
					<el-col :span="11">
						<el-date-picker v-model="dataForm.auditTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="timeOptionEnd" @change="timeChangeStart"></el-date-picker>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
		<div class="avue-crud">
			<el-table :data="dataList" border v-loading="dataListLoading">
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button v-if="permissions.eims_receipt_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)" :disabled="scope.row.status == 1">修改</el-button>
						<el-button v-if="permissions.eims_receipt_del" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" :disabled="scope.row.status == 1">删除</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="billId" label="单号" width="160"></el-table-column>
				<el-table-column prop="writeOffAmount" label="本次核销金额"></el-table-column>
				<el-table-column prop="receiptAmount" label="本次收款金额"></el-table-column>
				<el-table-column prop="customerName" label="客户名称"></el-table-column>
				<el-table-column prop="type" label="单据类型" :formatter="typeFormatter"></el-table-column>
				<el-table-column prop="memo" label="备注"></el-table-column>
				<el-table-column prop="auditUserName" label="审核用户"></el-table-column>
				<el-table-column prop="auditTime" label="审核时间" width="140"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="140"></el-table-column>
				<el-table-column prop="createUserName" label="创建用户姓名"></el-table-column>
			</el-table>
		</div>

		<div class="avue-crud__pagination">
			<el-pagination
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
				:current-page="pageIndex"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="pageSize"
				:total="totalPage"
				background
				layout="total, sizes, prev, pager, next"
			>
			</el-pagination>
		</div>
		<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
  </div>
</template>

<script>
import { fetchList, delObj } from "@/api/eims/receipt";
import TableForm from "./receipt-form";
import { mapGetters } from "vuex";
import { filterParams } from '@/util/tools'

export default {
  data() {
    return {
      dataForm: {
        key: "",
      },
      customerOptions: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      timeOptionStart: {},
      timeOptionEnd: {},
    };
  },
  components: {
    TableForm,
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
      let params2 = filterParams(this.dataForm)
      fetchList(Object.assign(params1, params2)).then((response) => {
        if(response.data.code == '0'){
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
        }else{
          this.$message.error(response.data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return delObj(id);
      }).then(response => {
        if(response.data.code == '0'){
          this.$message.success("删除成功")
          this.getDataList()
        }else{
          this.$message.error(response.data.msg)
        }
      })
    },
    searchChange() {
      this.pageIndex = 1;
      this.getDataList();
    },
    // 搜索清空
    searchReset() {
      for (let key in this.dataForm) {
        this.dataForm[key] = ''
      }
    },
    /**
     * 刷新回调
     */
    refreshChange() {
      this.getDataList(this.page);
    },
    //单据类型转换
    typeFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case "1":
          return '批发收款'
          break
        case "2":
          return '调帐'
          break
      }
    },
    timeChangeStart (){
			  this.timeOptionStart = Object.assign({},this.timeOptionStart,{
			    disabledDate: (time) => {
			      if(this.dataForm.createTimeEnd){
			        return time.getTime() > this.dataForm.createTimeEnd
			      }else{
			        return false
			      }
			    }
			  })
      },
      timeChangeEnd (){
			  this.timeOptionEnd = Object.assign({},this.timeOptionEnd,{
			    disabledDate: (time) => {
			      if(this.dataForm.createTimeStart){
			        return time.getTime() < this.dataForm.createTimeStart
			      }else{
			        return false
			      }
			    }
			  })
			},
  },
};
</script>
